<template>
	<view>
		<form @submit="formSubmit">
			<view class="cu-form-group">
				<view class="title">作物类型</view>
				<input name="cropType" placeholder="请选择" :value="cropType" disabled=""></input>
				<button class="cu-btn bg-green shadow" @tap="showModal" data-target="TypeModal">选择</button>
			</view>
			<view class="cu-form-group">
				<view class="title">作物品种</view>
				<input name="speicies" placeholder="请选择" :value="speicies" disabled=""></input>
				<button class="cu-btn bg-green shadow" @tap="showModal" data-target="SPModal">选择</button>
			</view>

			<view class="cu-form-group">
				<view class="title">生长周期</view>
				<input name="period" placeholder="请填写" type="text" v-model="period" @input="inputT" maxlength="6" />个月
			</view>
			<view class="cu-form-group">
				<view class="title">预计产量</view>
				<input name="predictYield" data-type="predict" placeholder="请填写" type="text" v-model="predictYield" @input="inputP"
				 maxlength="10">吨</input>
			</view>
			<view class="cu-form-group">
				<view class="title">实际产量</view>
				<input name="actualYield" data-type="actual" placeholder="请填写" type="text" v-model="actualYield" @input="inputA"
				 maxlength="10">吨</input>
			</view>
			<view class="cu-bar btn-group margin-tb-sm">
				<button class="cu-btn bg-green shadow-blur round lg"  form-type="submit">提交</button>
			</view>
		</form>


		<view class="cu-modal" :class="modalName=='TypeModal'?'show':''" @tap="hideModal">
			<view class="cu-dialog" @tap.stop="">
				<radio-group class="block" @change="TypeChange">
					<view class="cu-list menu text-left">
						<view class="cu-item" v-for="(item,index) in typeList" :key="index" @tap="typeClick" :data-id="item.id">
							<label class="flex justify-between align-center flex-sub">
								<view class="flex-sub">{{item.name}}</view>
								<radio class="type" :class="cropId==item.id?'checked':''" :checked="cropId==item.id?true:false" :value="item.name"></radio>
							</label>
						</view>
					</view>
				</radio-group>
			</view>
		</view>

		<view class="cu-modal" :class="modalName=='SPModal'?'show':''" @tap="hideModal">
			<view class="cu-dialog" @tap.stop="">
				<radio-group class="block" @change="spChange">
					<view class="cu-list menu text-left">
						<view class="cu-item" v-for="(item,index) in spList" :key="item.id" @tap="spClick" :data-id="item.id">
							<label class="flex justify-between align-center flex-sub">
								<view class="flex-sub">{{item.name}}</view>
								<radio class="sp" :class="spId==item.id?'checked':''" :checked="spId==item.id?true:false" :value="item.name"
								 :id="item.name"></radio>
							</label>
						</view>
					</view>
				</radio-group>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				modalName: null,
				cropId: "",
				cropType: "",
				spId: "",
				speicies: "",
				period: "",
				predictYield: "",
				actualYield: "",
				typeList: [],
				spList: [],
				landId: "",
				plantledgerDetailId: null,
				startDate: "",
				endDate: ""
			};
		},
		onLoad(options) {
			//console.log(options)
			if (options.id == "") {
				this.plantledgerDetailId = null
			} else {
				this.plantledgerDetailId = options.id
				this.cropType = options.crop
				this.speicies = options.speicies
				this.cropId = options.cropId
				this.spId = options.speiciesId
				this.period = options.period
				this.predictYield = options.predictYield
				this.actualYield = options.actualYield
			}
			this.landId = options.landId
			this.startDate = options.startDate
			this.endDate = options.endDate
		},
		methods: {
			showModal(e) {
				if (e.currentTarget.dataset.target == "SPModal" && this.cropType == "") {
					uni.showModal({
						title: '提示',
						content: "请先选择作物类型",
						showCancel: false
					});
					return;
				}
				if (e.currentTarget.dataset.target == "TypeModal") {
					this.getTypeList()
				} else {
					this.getspList()
				}
				this.modalName = e.currentTarget.dataset.target
			},
			hideModal(e) {
				this.modalName = null
			},
			inputT(e) {
				var that = this
				that.verify(e)
				setTimeout(() => {
					that.period = e.detail.value
				}, 1)
			},
			inputP(e) {
				var that = this
				that.verify(e)
				setTimeout(() => {
					that.predictYield = e.detail.value
				}, 1)
			},
			inputA(e) {
				var that = this
				that.verify(e)
				setTimeout(() => {
					that.actualYield = e.detail.value
				}, 1)
			},
			verify(e) {
				e.detail.value = e.detail.value.replace(/[^\d.]/g, ""); //清除“数字”和“.”以外的字符  
				e.detail.value = e.detail.value.replace(/\.{2,}/g, "."); //只保留第一个. 清除多余的  
				e.detail.value = e.detail.value.replace(".", "$#$").replace(/\./g, "").replace("$#$", ".");
				e.detail.value = e.detail.value.replace(/^(\-)*(\d+)\.(\d\d).*$/, '$1$2.$3'); //只能输入两个小数  
				if (e.detail.value.indexOf(".") < 0 && e.detail.value != "") { //以上已经过滤，此处控制的是如果没有小数点，首位不能为类似于 01、02的金额 
					e.detail.value = parseFloat(e.detail.value);
				} else if (e.detail.value.indexOf(".") == 0) { //首为小数点，补全
					e.detail.value = e.detail.value.replace(/[^$#$]/g, "0.");
					e.detail.value = e.detail.value.replace(/\.{2,}/g, ".");
				}
			},
			typeClick(e) {
				this.cropId = e.currentTarget.dataset.id
			},
			spClick(e) {
				this.spId = e.currentTarget.dataset.id
			},
			TypeChange(e) {
				this.cropType = e.detail.value
			},
			spChange(e) {
				this.speicies = e.detail.value
			},
			getTypeList() {
				uni.request({
					url: this.$config.apiUrl + '/cropController/getAllCrops',
					success: (res) => {
						if (res.data.ok) {
							this.typeList = res.data.data
						} else {
							uni.showToast({
								icon: "none",
								title: '获取作物类型失败',
								duration: 1000
							});
						}
					},
					fail() {
						uni.showModal({
							title: '提示',
							content: "获取作物类型失败",
							showCancel: false
						});
					}
				});
			},
			getspList() {
				//console.log(this.cropId)
				uni.request({
					url: this.$config.apiUrl + '/cropController/getSpecies',
					data: {
						cropId: this.cropId
					},
					method: "GET",
					success: (res) => {
						//console.log(res)
						if (res.data.ok) {
							this.spList = res.data.data
						} else {
							uni.showToast({
								icon: "none",
								title: '获取作物品种失败',
								duration: 1000
							});
						}
					},
					fail() {
						uni.showModal({
							title: '提示',
							content: "获取作物品种失败",
							showCancel: false
						});
					}
				});
			},
			formSubmit: function(e) {
				var that = this
				var formdata = e.detail.value
				if (formdata.cropType == '') {
					this.showData('请选择作物类型');
				} else if (formdata.speicies == '') {
					this.showData('请选择作物品种')
				} else if (formdata.period == '') {
					this.showData("请输入生长周期");
				} else if (formdata.predictYield == '') {
					this.showData("请输入预产量");
				} else if (formdata.actualYield == '') {
					this.showData('请输入实际产量')
				} else {
					uni.showLoading({
						title: '加载中'
					});
					uni.request({
						url: that.$config.apiUrl + '/dasPlantledgerController/updatePlantledgerDetail',
						data: {
							"userId": this.$store.getters.userid,
							"landId": that.landId,
							"year": parseInt(that.startDate),
							"plantledgerDetail": {
								"plantledgerDetailId": that.plantledgerDetailId, //新增时为空，修改时为原种植明细主键
								"cropId": this.cropId,
								"speciesId": this.spId,
								"period": formdata.period,
								"predictYield": formdata.predictYield,
								"actualYield": formdata.actualYield
							}
						},
						method: "POST",
						success: (res) => {
							if (res.data.ok) {
								uni.hideLoading();
								uni.showToast({
									title: '提交成功',
									duration: 3000
								});

								uni.redirectTo({
									url: './zzda_detail?landId=' + this.landId + '&startDate=' + this.startDate + '&endDate=' + this.endDate
								})
							} else {
								uni.hideLoading();
								uni.showToast({
									icon: "none",
									title: '提交失败',
									duration: 1000
								});
							}
						},
						fail() {
							uni.hideLoading();
							uni.showModal({
								title: '提示',
								content: "提交失败",
								showCancel: false
							});
						}
					});
				}
			},
			showData(str) {
				uni.showToast({
					icon: "none",
					title: str,
					duration: 2000
				})
			}
		}
	}
</script>

<style>
</style>
